import React from 'react';
import {Table} from 'antd';
import axios from 'axios';
import PropTypes from 'prop-types';
import {setItem, getItem} from '../../utils/store';
import {injectIntl} from 'react-intl';
import {connect} from 'react-redux'
import {loadMenus} from "../../redux/menu/menu.redux";
import {authFun} from '../../utils/tranStartType'

@connect(state => state.menu, {loadMenus})
class Grid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true,
                pageSize: getItem("pageSize") ? parseInt(getItem("pageSize"), 10) : 10,
                current: 1,
                hideOnSinglePage: true
            },
            loading: false
        };
        this.handleTableChange = this.handleTableChange.bind(this);
    }

    // 通过父组件更新子组件props时触发
    componentWillReceiveProps(nextProps) {
        if (nextProps.refresh !== this.props.refresh) {
            let page = this.state.pagination.current;
            if (nextProps.params !== this.props.params) {
                page = 1;
                this.setState({
                    pagination: {
                        ...this.state.pagination,
                        current: 1
                    }
                });
            }
            this.fetch({
                pagecount: this.state.pagination.pageSize,
                page: page,
                ...nextProps.params
            });
        }
    }

    componentDidMount() {
        //表格样式定制化
        let width = 0;
        const common = this.props.intl.messages.common;
        this.props.columns.forEach((item, index) => {
            if (!item.align) {
                item.align = 'center'
            }
            if (item.dataIndex === "status") {
                item.render = (text) => {
                    if (text === common.forbidden) {
                        return <span style={{color: "red"}}>{text}</span>
                    }
                    return text
                }
            }
            //操作权限
            // if(item.key==="operation"){
            //    console.log(item)
            // }
        });
        //设置滚动列表 每个都要给出宽度
        let flag = this.props.columns.every((item) => {
            return item.width
        });
        if (flag) {
            this.props.columns.forEach((item, index) => {
                if (item.width) {
                    width += item.width*1;
                }
            });
            this.setState({
                width: width
            },()=>{console.log(this.state.width)})
        }
        //针对接口 首次不需要加载数据，用户操作后加载数据
        if (this.props.noFirstFech) {
            return;
        }
        this.fetch({
            pagecount: getItem("pageSize") ? parseInt(getItem("pageSize"), 10) : 10,
            page: 1,
            ...this.props.params
        });
    }

    // 表单change事件
    handleTableChange(pagination, filters, sorter) {
        // 用户改变每页条数时，记录到本地变量中
        if (this.state.pagination.pageSize !== pagination.pageSize) {
            setItem("pageSize", pagination.pageSize);
        }
        const pager = {...this.state.pagination, ...pagination};
        this.setState({
            pagination: pager,
        });
        this.fetch({
            pagecount: pagination.pageSize,
            page: pagination.current,
            ...this.props.params
        });
    }
    
        // 后台查询数据
    fetch(params) {
        this.setState({
            loading: true
        });
        axios.post(this.props.url, {
            ...params
        }).then(res => {
            this.setState({
                loading: false,
            });
            if (res&&res.code==200) {
                if (typeof this.props.transformData === "function") {
                    res.data=this.props.transformData(res.data || []);
                }
                const pagination = {...this.state.pagination, total: res.pageLimit.totalCount};
                this.setState({
                  data: res.data,
                  pagination
                }, () => {
                    authFun(this.props.button, document.querySelectorAll('[data-auth]'));
                });
            } else {
              const pagination = {...this.state.pagination, total: 0};
              this.setState({
                data: [],
                pagination
              }, () => {
                authFun(this.props.button, document.querySelectorAll('[data-auth]'));
              });
            }
        });
    }

    render() {
        return (
            <Table
                bordered
                rowKey={record => record.id}
                size="middle"
                dataSource={this.state.data}
                pagination={this.state.pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
                /*样式方面自定义*/
                
                {...this.props}
            />
        )
    }
}

Grid.propTypes = {
    params: PropTypes.object,
    transformData: PropTypes.func,
    columns: PropTypes.array,
}

export default injectIntl(Grid);